<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>FBX模型加载</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .tccDraw {
            width: 100%;
            height: 800px;
        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/FBXLoader.js"></script>
    <script src="js/fflate.min.js"></script>
    <script src="js/Sky.js"></script>
</head>

<body>
    <div id="tccDraw" class="tccDraw">
    </div>
    <script>
        let scene, camera, renderer, labelRenderer, controls, showDiv, directionalLight, mesh, stats;
        var clock = new THREE.Clock();
        var mixers;
        /* 场景 */
        function initScene() {
            showDiv = document.getElementById("tccDraw");
            scene = new THREE.Scene();
            let axesHelper = new THREE.AxesHelper(500);
            scene.add(axesHelper);
        }
        /* 相机 */
        function initCamera() {
            //透视相机
            camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);
            camera.position.set(0, 500, 350);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        /* 渲染器 */
        function initRender() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);
            showDiv.appendChild(renderer.domElement);
        }

        /* 灯光 */
        function initLight() {
            let ambientLight = new THREE.AmbientLight(0xCCCCCC);
            scene.add(ambientLight);
            directionalLight = new THREE.DirectionalLight(0x585858);
            directionalLight.position.set(0, 3500, 0);
            scene.add(directionalLight);
        }

        /* 控制器 */
        function initControls() {
            controls = new THREE.OrbitControls(camera, showDiv);
        }
        /* 初始化性能插件status */
        function initStats() {
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }

        /*加载天空盒子*/
        function skyBox() {
            console.log("加载天空盒子");
            var sky = new THREE.Sky();
            sky.scale.setScalar(450000);
            scene.add(sky);
            sun = new THREE.Vector3();

            const effectController = {
                turbidity: 10,
                rayleigh: 3,
                mieCoefficient: 0.005,
                mieDirectionalG: 0.7,
                elevation: 2,
                azimuth: 180,
                exposure: renderer.toneMappingExposure
            };
        };


        function guiChanged() {
            const uniforms = sky.material.uniforms;
            uniforms['turbidity'].value = effectController.turbidity;
            uniforms['rayleigh'].value = effectController.rayleigh;
            uniforms['mieCoefficient'].value = effectController.mieCoefficient;
            uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
            const phi = THREE.MathUtils.degToRad(90 - effectController.elevation);
            const theta = THREE.MathUtils.degToRad(effectController.azimuth);
            sun.setFromSphericalCoords(1, phi, theta);
            uniforms['sunPosition'].value.copy(sun);
            renderer.toneMappingExposure = effectController.exposure;
            renderer.render(scene, camera);
            const gui = new GUI();
				gui.add( effectController, 'turbidity', 0.0, 20.0, 0.1 ).onChange( guiChanged );
				gui.add( effectController, 'rayleigh', 0.0, 4, 0.001 ).onChange( guiChanged );
				gui.add( effectController, 'mieCoefficient', 0.0, 0.1, 0.001 ).onChange( guiChanged );
				gui.add( effectController, 'mieDirectionalG', 0.0, 1, 0.001 ).onChange( guiChanged );
				gui.add( effectController, 'elevation', 0, 90, 0.1 ).onChange( guiChanged );
				gui.add( effectController, 'azimuth', - 180, 180, 0.1 ).onChange( guiChanged );
				gui.add( effectController, 'exposure', 0, 1, 0.0001 ).onChange( guiChanged );
				guiChanged();
        }
        initScene();
        initCamera();
        initLight();
        initControls();
        initRender();
        initStats();
        animate();
        skyBox();
        /* 循环渲染 */
        function animate() {
            requestAnimationFrame(animate);
            const delta = clock.getDelta();
            if (mixers) mixers.update(delta);
            controls.update();
            stats.update();
            renderer.render(scene, camera);
        }
    </script>
</body>

</html>